<!-- 本文件用于实现 菜单管理的弹窗显示 -->
<template>
  <!-- 引入简介头 -->
  <panelHead></panelHead>
  <!-- 这里是修bug的片段 -->
  <div class="btns">
    <el-button type="primary" plain @click="open(null)"><el-icon><Plus /></el-icon> 添加</el-button>
    <el-button plain @click="checkToken"><el-icon><Check /></el-icon> 检查token</el-button>
    <el-button type="danger" plain @click="clearLocalStorage"><el-icon><Delete /></el-icon> 清除存储</el-button>
  </div>

  <!-- 这里是选项弹窗，点击才会显示 -->
  <el-table :data="tableData.list" style="width: 100%;">
    <el-table-column prop="id" label="ID" />
    <el-table-column prop="name" label="昵称" />
    <el-table-column prop="permissionName" label="菜单权限" width="500px" />
    <el-table-column prop="permissionName" label="操作">
      <!-- 这里要使用插槽 -->
      <template #default="scope">
        <!-- 获取当前行 -->
        <el-button type="primary" @click="open(scope.row)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 这里是显示页数和跳转 -->
  <div class="pagination-info">
    <el-pagination v-model:current-page="permissionData.pageNum" :page-size="permissionData.pageSize" :size="small"
      :disabled="disabled" :background="false" layout="total, prev, pager, next" :total="tableData.total"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>



  <!-- 这里是显示详情信息 -->
  <el-dialog v-model="dialogTableVisible" title="添加权限" width="500" :before-close="beforeClose">


    <el-form ref="formRef" label-width="100px" label-position="left" :model="form" :rules="rules">

      <!-- 下面这个表单组件时隐藏的，是为了实时获取对应的选中的id -->
      <el-form-item label="权限id" prop="id" v-show="false">
        <el-input v-model="form.id"></el-input>
      </el-form-item>

      <el-form-item label="权限名称" prop="name">
        <el-input v-model="form.name" placeholder="请填写权限名称" />
      </el-form-item>

      <el-form-item label="权限" prop="permissions">
        <!-- 菜单的数据是从后端的接口来做的 -->
        <!-- <el-input v-model="formRef.permissions"></el-input> -->
        <!--     设置数据格式             样式                      未知            多选框样式     默认勾选的位置 -->
        <el-tree ref="treeRef" :data="permissionData.value" style="max-width: 600px;" node-key="id" show-checkbox
          :default-checked-keys="defaultKeys" :default-expanded-keys="[2]" />
        <!-- 默认勾选位置                       默认展开位置（这些都是内置函数） -->

      </el-form-item>

    </el-form>
    <!-- 这是一个插槽 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="confirm(form)" type="primary">确认</el-button>
        <el-button type="primary" @click="beforeClose">取消</el-button>
      </span>
    </template>

  </el-dialog>
</template>
<script setup>
import axios from 'axios';
import { ref, reactive, onMounted, nextTick } from 'vue'
import { userGetMenu, userSetMenus, menuList } from '../../../api';

import { Plus } from '@element-plus/icons-vue'
//引入elementplus的按钮
import { ElButton } from 'element-plus'
import { ElIcon } from 'element-plus'

//控制弹窗的显示和隐藏
const dialogTableVisible = ref(false)
//弹窗点击关闭要有回调函数（关闭弹窗）
const beforeClose = () => {
  dialogTableVisible.value = false
  //清空表单
  formRef.value.resetFields()
  //tree的选择重置
  treeRef.value.setCheckedKeys(defaultKeys)
}


//这个是测试
const clearLocalStorage = () => {
  localStorage.clear();
  console.log("清理完成")
}

const checkToken = () => {
  const token = localStorage.getItem('pz_token');
  if (token) {
    axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
    console.log('Token已正确传递');
  } else {
    console.log('Token不存在');
  }
}

const formRef = ref()//创建当前表单实例
const form = reactive({//创建当前的表单实例
  name: '',
  permissions: '',
  id: ''
})

//权限菜单树形结构数据
const permissionData = reactive({
  pageNum: 1,//总共多少个
  pageSize: 10,//一页多少个
})

//点解列表的回调函数
const handleCurrentChange = (val) => {
  permissionData.pageNum = val;
  getListData();
}

//点击列表的回调函数
const handleSizeChange = (val) => {
  permissionData.pageSize = val;
  getListData();
}


//请求列表数据
const getListData = () => {
  menuList(permissionData).then(({ data }) => {
    const { list, total } = data.data
    tableData.list = list
    tableData.total = total
  })
}

//在加载时去调用当前的接口，获取到菜单的数据，不需要进行传参
//问题出在这里，显示token错误
onMounted(() => {
  userGetMenu().then(({ data }) => {//这里是结构，必须使用data
    console.log(data)
    permissionData.value = data.data
  })
  getListData();
})

const tableData = reactive({
  list: [],
  total: 0
})


//打开弹窗
const open = (rowData = {}) => {
  dialogTableVisible.value = true
  //弹窗打开form生成是异步的
  nextTick(() => {//等待dom渲染完成
    if (rowData) {
      Object.assign(form, { id: rowData.id, name: rowData.name })
      treeRef.value.setCheckedKeys(rowData.permission)
    }
  })
}



//选中权限
const defaultKeys = [4, 5]

//表单的校验逻辑
const rules = reactive({
  name: [{
    required: true,
    message: '请填写权限名称',
    trigger: 'blur'
  }]
})

const treeRef = ref();//获取树的信息

// 表单提交(这里用的时formRef)
const confirm = async () => {
  if (!formRef.value) return; // 如果表单实例不存在，直接返回
  await formRef.value.validate((valid, fields) => {
    if (valid) {
      // 获取到treeRef组件的实例，获取到checkbox的数据
      const permissions = JSON.stringify(treeRef.value.getCheckedKeys());

      userSetMenus({ name: form.name, permissions, id: form.id }).then(({ data }) => {
        console.log(data, "data");
        // dialogTableVisible.value = false
        beforeClose();//关闭弹窗
        getListData();//刷新列表
      });
    } else {
      console.log('表单验证失败');
      console.log('表单验证失败字段：', fields);
    }
  });
};
</script>

<style scoped>
  .btns{
    background-color: white;
    padding-top: 5px;
    padding-left: 5px;
    el-button{
      text-align: center;
    }
  }

</style>